<template>
  <div class="login_box">
    <div class="card">
      <CardLog />
      <CardForm />
    </div>
  </div>
</template>

<script lang="ts" setup>
import CardForm from '@/views/login/cop/cardForm.vue'
import CardLog from '@/views/login/cop/cardLog.vue'
</script>
<style lang="less" scoped>
// .login_box {
//   justify-content: center;
//   text-align: center;
// }
.card {
  position: absolute;
  left: -20%;
  top: -50%;
  margin-top: -100px; // 负值的绝对值为高度的一半
  margin-left: -100px; // 负值的绝对值为宽度的一半

  width: 750px;
  height: 450px;
  border-radius: 40px;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(1px);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
}
</style>
